import React from 'react';

import Request from '@ajax/index.jsx';
import Tools from '@untils/tools.jsx';
import {APIS_HEART_MANAGE} from '@apis/index.js';
import {helpPoorFilters, helpCadreFilters, poorReason, helpProgress, sex, partyBranch} from '@assets/config/global.js';

import RCTable from '@components/table/index.jsx';
import NavTree from '@components/nav_tree/index.jsx';
import PageTopFilter from '@components/page_top_filter/index.jsx';
import HeartPoorModal from './parter_heart_poor_modal.jsx';
import HeartCadreModal from './parter_heart_cadre_modal.jsx';
import RCModal from '@components/modal/index.jsx';

import './scss/index.scss';

const _req = new Request();

class PartyHeart extends React.Component {
	constructor(props) {
        super(props);
        this.state = {
            list: [],
            currentPage: 1,
            pageSize: 10,
            pagination: null,

            poorName: null,
            poorReason: null,
            cadreName: null,
            cadrePhone: null,
            selectedTreeKeys: [],
            expandedKeys: [],
            // 编辑弹框
            editModalVisible: false,
            rowData: {},
            showFooter: false,

            // 删除提示
            delModalVisible: false,
            deleteID: '',
            tabSelected: 1
        };
        this.setCallback = Tools.setCallback.bind(this);
        this.topFilterForm = null;
        this.submitType = 'edit';
    }

	componentDidMount() {
         // this.requestList();
    }

    //tab切换  1==扶贫对象 2==帮扶干部
    tabChange(selected) {
        this.setCallback({
            list: [],
            poorName: null,
            poorReason: null,
            cadreName: null,
            cadrePhone: null,
            currentPage: 1,
            tabSelected: selected
        }, this.requestList);

        this.topFilterForm&&this.topFilterForm.resetFields()
    }

    //树筛选
    treeSeleted(selectedTreeKeys) {
        this.setCallback({selectedTreeKeys, currentPage: 1}, this.requestList);
        this.topFilterForm && this.topFilterForm.resetFields();
    }

    //请求列表
    requestList() {
        let {pageSize, currentPage, poorName, poorReason, cadreName, cadrePhone, tabSelected, selectedTreeKeys} = this.state;
        let data = {
            pagination: {
                currentPage: currentPage,
                order: "string",
                orderType: "ACCEPTDATE",
                pageSize: pageSize
            },
            searchContent: {
                name: tabSelected - 0 === 1 ? poorName : cadreName,
                poorReason: tabSelected - 0 === 1 ? poorReason : null,
                phone: tabSelected - 0 === 1 ? null : cadrePhone,
                orgId: selectedTreeKeys[0] - 0 || 0
            }
        };
        let options = Tools.objectAssign(tabSelected - 0 === 1 ? APIS_HEART_MANAGE.POORLIST : APIS_HEART_MANAGE.CADRELIST, {data});
        _req.ajaxList(options, this);
    }

    //查询
    submitSelect(filtes) {
        this.setCallback({...filtes, currentPage: 1}, this.requestList)
    }


    //table 刷新
    tableRefresh() {
        this.setCallback({poorName: null, poorReason: null, cadreName: null, cadrePhone: null, currentPage: 1}, this.requestList);
        this.topFilterForm&&this.topFilterForm.resetFields()
    }

    // 行点击
    onRowClick(record) {
        this.setCallback({rowData: record, editModalVisible: true, showFooter: false})
    }

    // 编辑弹窗
    edit(e, record) {
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation();
        this.submitType = 'edit';
        this.setCallback({rowData: record, editModalVisible: true, showFooter: true})
    }

    // 新增弹窗
    append() {
        this.submitType = 'append';
        let data = {
            orgId: this.state.selectedTreeKeys[0] - 0 || 0
        }
        this.setCallback({
            rowData: data,
            editModalVisible: true,
            showFooter: true
        });
    }

    // 新增、编辑提交
    confirmSubmit(formInfo) {
        this.setCallback({editModalVisible: false}, this.editOrAdd.bind(this, formInfo));
    }

    // 新增、编辑取消
    cancelSubmit() {
        this.setCallback({rowData: {}, editModalVisible: false});
    }

    // 编辑与新增
    editOrAdd(formInfo) {
        formInfo.orgId = this.state.selectedTreeKeys[0] - 0 || 0;
        let api = null;
        let tabSelected = this.state.tabSelected;
        if (this.submitType === 'edit') {
            api = tabSelected - 0 === 1 ? APIS_HEART_MANAGE.EDITPOOR : APIS_HEART_MANAGE.EDITCADRE;
            formInfo.id = this.state.rowData.id;
        } else {
            api = tabSelected - 0 === 1 ? APIS_HEART_MANAGE.APPENDPOOR : APIS_HEART_MANAGE.APPENDCADRE;
        }

        let options = Tools.objectAssign(api, {data: formInfo});
        _req.axios(options).then(res => this.requestList());
    }

    //删除弹窗
    del(e, id) {
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation();
        this.setCallback({deleteID: id, delModalVisible: true});
    }

    //确认删除
    confirmDel() {
        let options = this.state.tabSelected - 1 === 1 ?
            APIS_HEART_MANAGE.DELETEPOOR(this.state.deleteID)
            : APIS_HEART_MANAGE.DELETECADRE(this.state.deleteID);
        _req.axios(options).then(res => {
            this.setCallback({deleteID: '', delModalVisible: false}, this.requestList)
        }, err => {

        })
    }

    //取消删除
    cancelDel() {
        this.setCallback({deleteID: '', delModalVisible: false});
    }
    
    render() {
        let {
            pagination = false,
            list = [],
            expandedKeys = [],
            selectedTreeKeys = [],
            editModalVisible = false,
            rowData = {},
            showFooter = false,
            delModalVisible = false,
            tabSelected = 1
        } = this.state;

        const columnsPoor = [{
            title: '序号',
            key: '序号',
            render: (txt, row, index) => <span>{index + 1}</span>
        }, {
            title: '户主姓名',
            dataIndex: 'name',
            key: 'name',
            render: (txt) => <p className="ell-1" title={txt || ''}>{txt || '---'}</p>
        }, {
            title: '联系电话',
            dataIndex: 'phone',
            key: 'phone',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render: (txt) => <span>{sex[txt] ? sex[txt].name : '---'}</span>
        }, {
            title: '致贫原因',
            dataIndex: 'poorReason',
            key: 'poorReason',
            render: (txt) => <span>{poorReason[txt] ? poorReason[txt].name : '---'}</span>
        }, {
            title: '扶贫进度',
            dataIndex: 'helpProgress',
            key: 'helpProgress',
            render: (txt) => <span>{helpProgress[txt] ? helpProgress[txt].name : '---'}</span>
        }, {
            title: '操作',
            render: (record) => {
                return (
                    <div className="option-btns">
                        <span className="btn-edit btn-item"
                              onClick={(e) => this.edit(e, record)}>
                        </span>
                        <span className="btn-del btn-item"
                              onClick={(e) => this.del(e, record.id)}>
                        </span>
                    </div>
                )
            }
        }];

        const columnsCadre = [{
            title: '序号',
            key: '序号',
            render: (txt, row, index) => <span>{index + 1}</span>
        }, {
            title: '帮扶干部姓名',
            dataIndex: 'name',
            key: 'name',
            render: (txt) => <p className="ell-1" title={txt || ''}>{txt || '---'}</p>
        }, {
            title: '联系电话',
            dataIndex: 'phone',
            key: 'phone',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '所在党组织',
            dataIndex: 'orgId',
            key: 'orgId',
            render: (txt) => <span>{partyBranch[txt] ? partyBranch[txt].name : '---'}</span>
        }, {
            title: '操作',
            render: (record) => {
                return (
                    <div className="option-btns">
                        <span className="btn-edit btn-item"
                              onClick={(e) => this.edit(e, record)}>
                        </span>
                        <span className="btn-del btn-item"
                              onClick={(e) => this.del(e, record.id)}>
                        </span>
                    </div>
                )
            }
        }];

        return (
            <div className="help-manage">
            	<div className="help-top-content child-wrap">
            		<NavTree
	                    onSelect={this.treeSeleted.bind(this)}
	                    // 展开受限制 要传expandedKeys onExpand selectedTreeKeys
	                    // 以下三个都不传 是 一个自由组建
	                    expandedKeys={expandedKeys}
	                    selectedKeys={selectedTreeKeys}
	                    onExpand={this.setCallback.bind(this)}
	                />
	                <div className="child-main-wrap">
                        <div className="help-top-tab">
                            <div className="help-tab">
                                <div className={`help-tab-poor ${tabSelected === 1 ? 'active': ''}`} onClick={() => this.tabChange(1)}>扶贫对象</div>
                                <div className={`help-tab-poor ${tabSelected === 2 ? 'active': ''}`} onClick={() => this.tabChange(2)}>帮扶干部</div>
                            </div>
                        </div>
	                    <div className="child-main-content">
	                        <PageTopFilter
	                            filters={tabSelected - 0  === 1 ? helpPoorFilters : helpCadreFilters}
	                            buttons={['查询', '新增']}
	                            submitForm={this.submitSelect.bind(this)}
                                title="精准扶贫"
                                // 新增按钮
                                cancelForm={this.append.bind(this)}
	                            wrappedComponentRef={node => this.topFilterForm = node}
	                        />
	                        <RCTable
	                            columns={tabSelected - 0 === 1 ? columnsPoor : columnsCadre}
	                            dataSource={list}
	                            pagination={pagination}
	                            refresh={this.tableRefresh.bind(this)}
                                // 行点击
                                clickRow={this.onRowClick.bind(this)}
	                            onChange={(pagination) => {
	                                let {selectedRowKeys = [], current: currentPage, pageSize, name = ''} = pagination;
	                                this.setCallback({selectedRowKeys, pageSize, currentPage, name}, this.requestList)
	                            }}
	                        />
	                    </div>
	                </div>
            	</div>

            	{/*查看，编辑，新增弹框*/}
                {
                    editModalVisible
                        ? tabSelected - 0 === 1 ?
                            <HeartPoorModal
                                modalVisible={true}
                                data={rowData}
                                showFooter={showFooter}
                                submitForm={this.confirmSubmit.bind(this)}
                                cancelForm={this.cancelSubmit.bind(this)}
                                />
                            :
                            <HeartCadreModal
                                modalVisible={true}
                                data={rowData}
                                showFooter={showFooter}
                                submitForm={this.confirmSubmit.bind(this)}
                                cancelForm={this.cancelSubmit.bind(this)}
                                />
                        : null
                }

                {/*删除弹框*/}
                {
                    <RCModal
                        title='删除提示'
                        visible={delModalVisible}
                        onOk={this.confirmDel.bind(this)}
                        onCancel={this.cancelDel.bind(this)}
                    >
                        <p className="del-warning">是否确认删除信息？</p>
                    </RCModal>
                }
            </div>
        )
    }
}

export default PartyHeart;